<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="include/taglib.jsp"%>
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!--[if lt IE 9]><script src="${ctx}/assets/js/html5.js"></script><![endif]-->
<meta charset="utf-8" />
<title>index</title>
<link rel="stylesheet" href="${ctx}/assets/css/style.css" />
<script src="${ctx}/assets/js/jquery-1.7.1.min.js"></script>
<script src="${ctx}/assets/js/jquery.masonry.min.js"></script>
<script src="${ctx}/assets/js/jquery.infinitescroll.min.js"></script>
<script src="${ctx}/assets/js/jquery.blockUI.js"></script>
<script type="text/javascript">
<!--
	$(function() {
		var $container = $('#container1');
		$container.imagesLoaded(function() {
			$container.masonry({
				itemSelector : '.box',
				columnWidth : 100
			});
		});

		$container.infinitescroll({
			navSelector : '#page-nav', 
			nextSelector : '#page-nav a', 
			itemSelector : '.box', 
			loading : {
				finishedMsg : '已经显示全部内容。',
				msgText : "加载中...",
				img : 'http://i.imgur.com/6RMhx.gif'
			}
		}, function(newElements) {
			var $newElems = $(newElements).css({
				opacity : 0
			});
			$newElems.imagesLoaded(function() {
				$newElems.animate({
					opacity : 1
				});
				$container.masonry('appended', $newElems, true);
			});
		});

		$(".ilike").click(function(){
			alert("收藏功能暂不开放！");
		});
	});
//-->
</script>
</head>
<body>
	<%@include file="include/head.jsp"%>
	<div class="vote-contain clearfix" id="container1">
		<c:forEach items="${subjects }" var="subject">
			<div class="col3 box ${subject.hasPhoto ? 'photo' : '' }">
				<c:choose>
					<c:when test="${subject.hasPhoto }">
						<ul class="pic">
							<li><a href="${ctx }/vote/${subject.subjectId}/detail"><img src="${subject.cover }" /></a></li>
						</ul>
					</c:when>
					<c:when test="${empty(subject.descript) }">
						<ul class="empty">
							<li>这个人很懒，什么都没写</li>
						</ul>
					</c:when>
					<c:otherwise>
						<ul class="text">
							<li>${subject.descript }</li>
						</ul>
					</c:otherwise>
				</c:choose>
				<div class="favorite">
					<span class="like ilike">♥ 收藏</span>
				</div>
				<div class="alubm_info">
					<img src="${ctx }/assets/images/avatar.png" />
					<div class="user_info">
						<span class="u_link"><a href="${ctx }/profile/${subject.creator}/detail"
							class="n icard">${subject.username }</a>：</span><br> <a
							target="_blank" class="album_title" href="${ctx }/vote/${subject.subjectId}/detail"
							title="${subject.subjectTitle }">${subject.subjectTitle }</a>
					</div>
				</div>
				<ul class="rep_list ">
					<li class="rep_f rep_pb">
					<c:forEach varStatus="idx" items="${subject.items }" var="it">
						<p class="rep_content">
							<span class="like">${idx.index+1 }</span>${it.item } <span class="vote-result">${it.itemCount }票</span>
						</p>
					</c:forEach>
					</li>
				</ul>
				<div class="ft"></div>
			</div>
		</c:forEach>
	</div>
	<%@include file="include/foot.jsp" %>
	<nav id="page-nav">
		<c:if test="${!empty(page) }">
			<a href="${ctx }/page/${page}"></a>
		</c:if>
	</nav>
</body>
</html>